<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui1/css/layui.css}">
    <script th:src="@{/layui1/layui.js}"></script>
    <script th:src="@{/js/jquery-1.8.3.min.js}"></script>
</head>
<body>
<input type="hidden" name="petrolStationId" id="petrolStationId">
<input type="hidden" name="pic" id="pic1">

<div id="photo" class="layui-upload-list" style="display: none;text-align: center">
    <img class="layui-upload-img" id="pic2" width="600px" height="500px">
</div>

<table class="layui-table" lay-skin="line,row"  style="width: 50%;text-align: center">
    <colgroup>
        <col width="30%">
        <col width="70%">
    </colgroup>
    <thead>
    <tr>
        <th colspan="2" style="text-align: center">加油站基本信息</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>加油站名称</td>
        <td id="petrolStationName" name="petrolStationName"></td>
    </tr>
    <tr>
        <td>加油站地址</td>
        <td id="site" name="site"></td>
    </tr>
    <tr>
        <td>主管公安机关</td>
        <td id="deptId" name="deptId"></td>
    </tr>
    <tr>
        <td>加油站性质</td>
        <td id="nature" name="nature"></td>
    </tr>
    <tr>
        <td>职工人数</td>
        <td id="staffAmount" name="staffAmount"></td>
    </tr>
    <tr>
        <td>加油机数量</td>
        <td id="tankerAmount" name="tankerAmount"></td>
    </tr>
    <tr>
        <td>法人姓名</td>
        <td id="legalPersonName" name="legalPersonName"></td>
    </tr>
    <tr>
        <td>法人身份证号</td>
        <td id="legalPersonCard" name="legalPersonCard"></td>
    </tr>
    <tr>
        <td>法人联系方式</td>
        <td id="legalPersonPhone" name="legalPersonPhone"></td>
    </tr>
    <tr>
        <td>保卫组织负责人</td>
        <td id="defendPrincipal" name="defendPrincipal"></td>
    </tr>
    <tr>
        <td>保卫组织负联系电话</td>
        <td id="defendPhone" name="defendPhone"></td>
    </tr>
    </tbody>
    <thead>
    <tr>
        <th colspan="2" style="text-align: center">加油站照片信息</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td colspan="2">
            <button class="layui-btn layui-btn-radius" id="check" lay-filter="check_filter">查看加油站照片</button>
            <button class="layui-btn layui-btn-radius layui-btn-normal" id="upload">上传加油站照片</button>
        </td>
    </tr>
    </tbody>
</table>

<script>
    //获取油站表格信息
    $(function () {
        $.ajax({
            url: "/petrolStation/selectPetrolStation",
            type: 'get',
            dataType: 'json',
            success: function (result) {
                if (result!=null){
                    console.log(result);
                    $("#petrolStationId").val(result[0].petrolStationId);
                    $("#petrolStationName").text(result[0].petrolStationName);
                    $("#site").text(result[0].site);
                    if(result[0].tankerAmount<=4){
                        $("#nature").text("小型加油站");
                    }else if(result[0].tankerAmount>4&&result[0].tankerAmount<=8){
                        $("#nature").text("中型加油站");
                    }else{
                        $("#nature").text("大型加油站");
                    }
                    $("#staffAmount").text(result[0].staffAmount);
                    $("#tankerAmount").text(result[0].tankerAmount);
                    $("#legalPersonName").text(result[0].legalPersonName);
                    $("#legalPersonCard").text(result[0].legalPersonCard);
                    $("#legalPersonPhone").text(result[0].legalPersonPhone);
                    $("#defendPrincipal").text(result[0].defendPrincipal);
                    $("#defendPhone").text(result[0].defendPhone);
                    $("#pic2").attr('src',result[0].pic);
                }
            }
        });
    })
    //获取部门名称
    $.ajax({
        url: "/petrolStation/selectDept",
        type: 'get',
        dataType: 'json',
        success: function (result) {
            if (result!=null){
                $("#deptId").text(result[0].deptName);
            }
        }
    });

    layui.use(['layer', 'form',  'jquery','upload'], function () {
        var upload = layui.upload;
        var $ = layui.jquery;
        var layer= layui.layer;

        //普通图片上传
        var uploadInst = upload.render({
            url: '/petrolStation/uploadPic'
            ,type:'post'
            ,elem: '#upload'
            ,done: function(res){
                //如果上传失败
                if(res.response == 'success'){
                    let src="https://"+res.name;
                    $('#pic1').val(src);
                    $('#pic2').attr('src',src );
                }else
                {
                    return layer.msg('上传失败,您没有权限');
                }
                //上传成功
            }
        });

        //按钮查看加油站照片
        $("#check").click(function () {
            layer.open({
                title: '加油站照片',
                type: 1,
                content: $('#photo'),
                area: ['700px', '600px']
            });
        })
    });
</script>
</body>
</html>